<script setup lang="ts"></script>
<template>
  <div class="">
    <div class="flex items-center py-2 border-b">
      <div class="pr-2">
        <el-avatar
          :size="50"
          src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp"
        ></el-avatar>
      </div>
      <div class="">
        <h6 class="text-lg">admin</h6>
        <span class="text-sm text-gray-500">ann.vben@gmail.com</span>
      </div>
    </div>
    <ul class="w-full">
      <li class="py-1">
        <router-link
          to="/"
          class="flex py-2 items-center hover:bg-gray-100 px-1.5 rounded-sm"
          style="margin: 0 -7px"
        >
          <span
            class="i-akar-icons-css-fill text-sm text-icon text-gray-500 mr-0.5"
          ></span>
          <span class="text-sm text-gray-500">文档</span>
        </router-link>
      </li>
      <li class="py-1">
        <router-link
          to="/"
          class="flex py-2 items-center hover:bg-gray-100 px-1.5 rounded-sm"
          style="margin: 0 -7px"
        >
          <span
            class="i-akar-icons-css-fill text-sm text-icon text-gray-500 mr-0.5"
          ></span>
          <span class="text-sm text-gray-500">文档</span>
        </router-link>
      </li>
      <li class="border-b py-1">
        <router-link
          to="/"
          class="flex py-1.5 items-center hover:bg-gray-100 px-1.5 rounded-sm"
          style="margin: 0 -7px"
        >
          <span
            class="i-akar-icons-css-fill text-sm text-icon text-gray-500 mr-0.5"
          ></span>
          <span class="text-sm text-gray-500">文档</span>
        </router-link>
      </li>
      <li class="border-b py-1">
        <div class="flex justify-between items-center py-1 hover:bg-gray-100 px-1.5 rounded-sm w-full" style="margin: 0 -7px 0 -7px;width: 105%;">
          <el-button
            text
            class=" justify-start"
            color="#999"
            size="default"
            style=" padding: 0px; justify-content: start;height: 25px;"
          >
            <span class="i-akar-icons-css-fill text-sm text-icon mr-0.5"></span>
            <span class="py-2.5 text-gray-500"> 锁定屏幕</span>
          </el-button>
          <span class="text-xs text-gray-400">ALT K</span>
        </div>
      </li>
      <li class="py-1">
        <div class="flex justify-between items-center py-1 hover:bg-gray-100 px-1.5 rounded-sm w-full" style="margin: 0 -7px;width: 105%;">
        <el-button
          text
          class="justify-start"
          size="default"
          style=" padding: 0px; justify-content: start;height: 25px;"
        >
          <span class="i-akar-icons-css-fill text-sm text-icon mr-0.5"></span>
          <span class="py-2.5 text-gray-500">退出登录</span>
        </el-button>
          <span class="text-xs text-gray-400">ALT K</span></div>
      </li>
    </ul>
  </div>
</template>
